<template>
  <div class="carNumber">
    <c-title :hide="false" text="选择车牌号"></c-title>
    <div class="line">车牌数：{{ car_total }}</div>
    <div class="cell_radio_box">
      <van-radio-group v-model="radio">
        <div class="lis" v-for="(item, ind) in info" :key="ind" @click="tapSelect(item.id)">
          <div class="left">{{ item.license_no }}</div>
          <div class="right"><van-radio :name="item.id" checked-color="#FE5E56" /></div>
        </div>
      </van-radio-group>
    </div>
    <div class="btn set-pc-style">
      <div class="txt" @click="toOrderPay" v-if="$route.params.orderGoodsId">支付</div>
      <div class="txt" @click="bindCarNumber" v-else>绑定</div>
    </div>
  </div>
</template>
<script>
import { scrollMixin } from "utils/mixin";
export default {
  mixins: [scrollMixin],
  data() {
    return {
      radio: "",
      info: [],
      car_total: 0,
      page: 1,
      total_page: 0,
      isLoadMore: true
    };
  },
  activated() {
    this.getData();
  },
  methods: {
    async toOrderPay() {
      let json = {
        address: "",
        goods: `[{"goods_id":${this.$route.params.orderGoodsId},"total":1,"option_id":"0"}]`,
        member_coupon_ids: "[]",
        orders: "[]",
        invoice: {},
        mark: 0,
        dispatch_type_id: 1,
        first_default: "",
        cart_ids: "[]",
        positioning_success: 0,
        province: "",
        city: "",
        car_id: this.radio
      };
      let { data, msg, result } = await $http.post("plugin.new-coupon.frontend.controllers.flash-sale.index", json, "");
      if (result) {
        console.log(data);
        this.$router.push(this.fun.getUrl("orderpay", { order_ids: data.order_ids }));
      } else {
        this.$toast(msg);
      }
    },
    async bindCarNumber() {
      let json = { id: this.$route.params.id, car_id: this.radio };
      let { data, msg, result } = await $http.post("plugin.new-coupon.frontend.controllers.member-coupon.bind-car-no", json, "");
      if (result) {
        this.$toast(msg);
        this.$router.push(this.fun.getUrl("new_coupon", {}));
      } else {
        this.$toast(msg);
      }
    },
    tapSelect(id) {
      this.radio = id;
    },
    async getData() {
      let { data, msg, result } = await $http.post("plugin.new-coupon.frontend.controllers.index.get-car", {}, "");
      console.log(data);
      if (result) {
        this.info = data.list.data;
        this.total_page = data.list.last_page;
        this.isLoadMore = true;
        this.car_total = data.list.total;
      } else {
        this.$toast(msg);
      }
    },
    async getMoreData() {
      if (!this.isLoadMore) return;
      this.isLoadMore = false; // 防止多次请求分页数据
      if (this.page >= this.total_page) {
        return;
      } else {
        this.page += 1;
        let json = {
          page: this.page
        };
        let { data, msg, result } = await $http.post("plugin.new-coupon.frontend.controllers.index.get-car", json, "");
        this.isLoadMore = true;
        if (result) {
          this.info = this.info.concat(data.list.data);
        } else {
          this.$toast(msg);
          this.page = this.page - 1;
          this.isLoadMore = false;
        }
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.carNumber {
  padding: 0 0.75rem;
  box-sizing: border-box;
  overflow: hidden;
  padding-bottom: 3rem;
  .btn {
    background: #ffffff;
    box-shadow: 0rem -0.03rem 0.31rem 0.03rem #f5f5f5;
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 0.63rem 0.75rem;
    box-sizing: border-box;
    overflow: hidden;
    width: 100%;
    .txt {
      height: 2.5rem;
      background: #f15353;
      border-radius: 1.28rem;
      text-align: center;
      line-height: 2.5rem;
      font-weight: 500;
      font-size: 0.94rem;
      color: #ffffff;
    }
  }
  .cell_radio_box {
    background: #fff;
    border-radius: 0.5rem;
    .lis {
      display: flex;
      justify-content: space-between;
      margin: 0 0.75rem;
      border-bottom: 1px solid #f0f0f1;
      padding: 1.19rem 0;
      .left {
        font-weight: 500;
        font-size: 0.88rem;
        flex: 1;
        text-align: left;
      }
    }

    .lis:last-child {
      border-bottom: none;
    }
  }

  .line {
    margin: 0.91rem 0;
    font-size: 0.88rem;
    text-align: left;
  }
}
</style>
